<template>
  <div>
    <p>您要购买的商品数量: {{ count }} </p>
    <!-- 需求: 点击按钮让商品数量 +1 -->
    <!-- v-on 语法: -->
    <!-- v-on:事件名="事件处理函数" -->
    <!-- 简写成 @ -->
    <button v-on:click="add">点我+1</button>
    <!-- 需求: 点击按钮让商品数量增加指定的数值. 观念冲突:函数加括号表示调用,但在Vue的 v-on指令中加括号表示传参,不会立即调用,依然是绑定该事件处理函数,但是事件触发时会将指定的参数传入 -->
    <button @click="addCount(5)">点我+5</button>
  </div>
</template>

<script>
export default {
  data() {
    return {
      count: 0
    }
  },
  methods: {
    add() {
      // Vue 开发的特点: 数据驱动视图
      // 数据修改后, 用到该数据的视图层会自动更新
      // 如何在methods中的函数里操作data中的数据呢?
      // 只要在methods中的函数,想访问data中的数据,只需要在前面加上this.即可
      this.count ++
    },
    addCount(count) {
      this.count += count
    }
  }
}
</script>

<style lang="scss" scoped>

</style>